<template>
     <div class="device-box">
        <CardBox title="设备列表"></CardBox>
        <div class="content-container">
          <div class="device-grid">
            <div 
              class="device-item" 
              v-for="(item, index) in devices" 
              :key="index" 
              @click="handleDeviceClick(item)"
              :class="{'active': currentContent === item}"
            >
              <div class="device-chart" :ref="'deviceChart' + index"></div>
              <div class="device-info">
                <div class="device-type">{{ item.name }}</div>
              </div>
            </div>
            <div class="device-item">
              <div class="device-status">设备状态</div>
              <div class="status-item">
                <span class="status-dot status-dot-normal"></span>
                <span class="status-text">正常</span>
              </div>
              <div class="status-item">
                <span class="status-dot status-dot-offline"></span>
                <span class="status-text">离线</span>
              </div>
              <div class="status-item">
                <span class="status-dot status-dot-error"></span>
                <span  class="status-text">异常</span>
              </div>
            </div>
          </div>
        </div>
      </div>
</template>
<script>
export default {
    name: 'Device',
    data() {
        return {
            devices: [
            {
              id: 1,
              type: '雪兔',
              name: '红外',
              dialogType: 'video',
              dialogData: {
                title: '红外相机捕捉',
                videos: [
                  "https://ui.ecoheze.com/weed/89,0f0626b514ed14.mp4",
                  "https://ui.ecoheze.com/weed/89,0ef54eb419b0c2.mp4",
                  "https://ui.ecoheze.com/weed/93,0eedf38f0da0ea.mp4"
                ]
              },
              status: {
                normal: 12,
                offline: 0,
                error: 0
              }
            },
            {
              name: '声纹',
              type: '鸟鸣',
              dialogType: 'image',
              dialogData: {
                title: '声纹识别记录',
                images: [
                  "http://habitat.especies.cn/static/specie/images/Eophona_personata/31977339094_4668755000_b.jpg",
                  "http://habitat.especies.cn/static/specie/photos/%E7%99%BD%E5%A4%B4%E9%B9%8E1.jpg",
                  "http://habitat.especies.cn/static/specie/photos/%E7%81%B0%E8%83%8C%E9%B8%AB1.jpg"
                ]
              },
              status: {
                normal: 0,
                offline: 10,
                error: 0
              }
            },
            {
              name: '视频',
              type: '水鸟',
              dialogType: 'video',
              dialogData: {
                title: '水鸟监测视频',
                videos: [
                  "https://ui.ecoheze.com/weed/89,0efb0375fed39d.mp4",
                  "https://ui.ecoheze.com/weed/90,0efab1b2ff2f36.mp4",
                  "https://ui.ecoheze.com/weed/89,0efa934f3420d0.mp4"
                ]
              },
              status: {
                normal: 3,
                offline: 0,
                error: 0
              }
            },
            {
              name: '虫情',
              type: '昆虫',
              dialogType: 'image',
              dialogData: {
                title: '红外相机捕捉',
                images: [
                  "http://trap.wdtec.cc/upload/64774fee-1c62-4303-8fb1-316c1a7d173e.jpg",
                  "http://trap.wdtec.cc/upload/1824142c-f06d-49b3-95c2-36f0046c274c.jpg",
                  "http://trap.wdtec.cc/upload/fc18492e-330d-4a10-ba25-c8d352d13ccf.jpg"
                ]
              },
              status: {
                normal: 1,
                offline: 1,
                error: 0
              }
            },
            {
              name: '气象',
              type: '监测',
              dialogType: 'chart',
              dialogData: {
                title: '24小时气象数据',
                data: [
                  { time: '00:00', value: 12 },
                  { time: '01:00', value: 12 },
                  { time: '02:00', value: 12 },
                  { time: '03:00', value: 11 },
                  { time: '04:00', value: 12 },
                  { time: '05:00', value: 13 },
                  { time: '06:00', value: 13 },
                  { time: '07:00', value: 15 },
                  { time: '08:00', value: 16 },
                  { time: '09:00', value: 18 },
                  { time: '10:00', value: 19 },
                  { time: '11:00', value: 20 },
                  { time: '12:00', value: 22 },
                  { time: '13:00', value: 23 },
                  { time: '14:00', value: 23 },
                  { time: '15:00', value: 23 },
                  { time: '16:00', value: 22 },
                  { time: '17:00', value: 22 },
                  { time: '18:00', value: 21 },
                  { time: '19:00', value: 20 },
                  { time: '20:00', value: 20 },
                  { time: '21:00', value: 18 },
                  { time: '22:00', value: 17 },
                  { time: '23:00', value: 15 }
                ]
              },
              status: {
                normal: 5,
                offline: 0,
                error: 0
              }
            },
            {
              name: '土壤',
              type: '监测',
              dialogType: 'chart',
              dialogData: {
                title: '土壤湿度变化',
                data: [
                  { time: '00:00', value: 45 },
                  { time: '04:00', value: 42 },
                  { time: '08:00', value: 40 },
                  { time: '12:00', value: 38 },
                  { time: '16:00', value: 41 },
                  { time: '20:00', value: 44 }
                ]
              },
              status: {
                normal: 0,
                offline: 50,
                error: 0
              }
            },
            {
              name: '空气',
              type: '监测',
              dialogType: 'chart',
              dialogData: {
                title: '空气质量指数',
                data: [
                  { time: '00:00', value: 35 },
                  { time: '04:00', value: 32 },
                  { time: '08:00', value: 45 },
                  { time: '12:00', value: 55 },
                  { time: '16:00', value: 48 },
                  { time: '20:00', value: 40 }
                ]
              },
              status: {
                normal: 0,
                offline: 0,
                error: 50
              }
            }
          ]
        }
    }
}
</script>
<style scoped  lang="scss">

</style>
